<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="./css/swiper-aircraft.css" rel="stylesheet" type="text/css">
  <link href="./css/aircraft.css" rel="stylesheet" type="text/css">
  <link href="./css/style_of_index.css" rel="stylesheet" type="text/css">
  <link href="./css/nav.css" rel="stylesheet" type="text/css">
  <script src="./javascript/jQuery.js"></script>

</head>

<body>
  <header class="header">
    <nav class="navbar">
      <a href="index.html" class="nav-logo">SpaceEye</a>
      <ul class="nav-menu">
        <li class="nav-item">
          <a href="history.html" class="nav-link">航天历史</a>
        </li>
        <li class="nav-item">
          <a href="human.html" class="nav-link">重要人物</a>
        </li>
        <li class="nav-item">
          <a href="News.html" class="nav-link">近期资讯</a>
        </li>
        <li class="nav-item">
          <a href="aircraft.html" class="nav-link">航天器展示</a>
        </li>
        <li class="nav-item">
          <a href="emailsender.html" class="nav-link">太空漂流瓶</a>
        </li>
        <li></li>
      </ul>
      <div class="nav-bottom">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>
  <div class="swiper-container">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-130%">
          <h3>长征五号运载火箭</h3>
        </div>
        <div class="img-box"><img src="./soures/images/1.jpg" style="transform:translateX(0);"></div>
      </div>

      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-130%">
          <h3>天宫空间站</h3>
        </div>
        <div class="img-box"><img src="soures/images/Tiangong_Space_Station_Rendering_2022.07.jpg"></div>
      </div>

      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-130%">
          <h3>嫦娥五号月球探测器</h3>
        </div>
        <div class="img-box"><img src="soures/images/Chang-e-5_Orbiter_Ascender_seperation.png"></div>
      </div>

      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-130%">
          <h3 class="shen9">长征九号
            <div style="font-size: 50px;">click me↑</div>
          </h3>
        </div>
        <div class="img-box"><img src="soures/images/email-screen-1.jpg"></div>
        <div class="iframe" style="width: 90%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="Untitled genially" frameborder="0" width="1920px" height="1080px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/62445bc17a4ad600117ac3cf" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
        <div class="iframe-close"><img src="./soures/images/shenzhou9.png" alt=""></div>
      </div>




    </div>
    <div class="button-prev button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
        <g id="arrow-svg-home">
          <g id="circ" class="cls-1">
            <circle cx="42" cy="42" r="40" class="cls-4"></circle>
          </g>
          <g id="arrow">
            <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
          </g>
          <path id="line" d="M120,0H0" class="cls-3"></path>
        </g>
      </svg></div>
    <!--左箭头-->
    <div class="button-next button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
        <g id="arrow-svg-home">
          <g id="circ" class="cls-1">
            <circle cx="42" cy="42" r="40" class="cls-4"></circle>
          </g>
          <g id="arrow">
            <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z" class="cls-2"></path>
          </g>
          <path id="line" d="M120,0H0" class="cls-3"></path>
        </g>
      </svg></div>
    <!--右箭头-->
  </div>

  <script src="./javascript/swiper-aircraft.js"></script>
  <script src="./javascript/aircraft.js"></script>
  <script src="./javascript/jQuery.js"></script>
  <script>
    window.onload = function () {
      const bottom = document.querySelector(".nav-bottom");
      const navMenu = document.querySelector(".nav-menu");

      bottom.addEventListener("click", mobileMenu);

      function mobileMenu() {
        bottom.classList.toggle("active");
        navMenu.classList.toggle("active");
      }
    }
  </script>

</body>

</html>